<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 类名跟构造函数名一样，要大写
      // 是构造函数的语法糖
      /**
       * 构造器
       *    对创建的对象，进行初始化赋值
       * 属性
       *    实例属性（个性）
       *    静态属性（共性）
       * 方法（描述行为）
       *    实例方法（个性）
       *    静态方法（共性）
       **/
      class Animal {
        // 定义的实例属性
        name = ''
        age = 0

        // 定义成静态属性
        static home = '地球'

        constructor(name, age) {
          // 这里的this是指创建出来的实力对象
          this.name = name
          this.age = age
        }

        cry(voice) {
          // 这里的this，是实例
          console.log(`${this.name} 是这样叫的 ${voice}`)
        }

        static sleep() {
          // 这里的this是类名
          console.log(`所有动物都在 ${this.home} 上，闭着眼睛睡觉!!!`)
        }
      }

      /*************实例相关*******************/
      //   console.log(typeof Animal)
      //   const p1 = new Animal()
      //   p1.name = '旺财'
      //   p1.age = 3
      const p1 = new Animal('旺财', 5)
      p1.cry('旺旺')

      console.log(p1)

      //   const p2 = new Animal()
      //   p2.name = '蓝猫'
      //   p2.age = 10
      const p2 = new Animal('蓝猫', 10)

      console.log(p2)

      const p3 = new Animal('杰瑞', 20)
      p3.cry('滋滋')
      // 实例属性得通过实例/对象去访问
      p3.age = 30
      console.log(p3)

      /************静态相关*****************/
      Animal.home = '开普勒2b'
      console.log(Animal.home)

      Animal.sleep()
    </script>
  </body>
</html>
